<!--
 * @Author: your name
 * @Date: 2021-08-06 01:14:04
 * @LastEditTime: 2021-08-10 20:01:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \toutiao-me:\super-double-master\src\components\jfgs.vue
-->
<!--  -->
<template>
  <div class="jjjj">
    <div class="Service-ssss">
    <div>
    <span>
      <van-image
        width="100"
        height="100"
        :src="img"
      />
    </span>
    <span class="span">{{sss}}</span>
    <span class="sp"> {{ssss}} </span>
    <span class="hot_itemmm">协会成员</span>
    <span class="hot_itemmmm">服务好</span>
    <span class="hot_itemmmmm">协会成员</span>
    <div>
      <van-icon name="location" color="#979191" size="20"/>
      <span class='text'>123km</span>
      <span class="spandz">{{sssss}}</span>
    </div>
    </div>
    </div>
  </div>

</template>

<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';

export default {
  name: '',

  // import所引入的组件注册
  components: {},

  // 子组件进行数据接收
  props: ['img', 'sss', 'ssss', 'sssss'],

  data () {
    return {}
  },

  // 监听属性
  computed: {},

  // 监控data中的数据变化
  watch: {},

  // 方法集合
  methods: {},

  // 生命周期 - 组件实例刚被创建
  beforeCreate () {},
  // 创建完成 访问当前this实例
  created () {},
  // 挂载之前
  beforeMount () {},
  // 挂载完成 访问DOM元素
  mounted () {},
  // 更新之前
  beforeUpdate () {},
  // 更新之后
  updated () {},
  // for keep-alive 缓存功能，组件被激活时调用
  activated () {},
  // for keep-alive 组件被移除时调用
  deactivated () {},
  // 组件销毁之前调用
  beforeDestroy () {},
  // 组件销毁之后调用
  destroyed () {}
}
</script>
<style lang='less' scoped>
/* //@import url(); 引入公共css类 */
/deep/ .Service-ssss {
  position: relative;
  background-color: #ffffff;
  /* padding: 0.266667rem; */
  padding: 20px 0px 10px 20px;
  width: 100%;
  height: 270px;
  margin: auto;
  margin-top: 10px;
  margin-bottom:1px
}
/deep/ .span {
  margin-left: 30px;
  font-size: 14px;
  vertical-align: top;
}
/deep/ .sp {
  position: absolute;
  top: 80px;
  left: 250px;
  font-size: 14px;
  color: #d8d7cf;
}
/deep/ .hot_itemmm {
  height: 60px;
  padding: 0 0.373333rem;
  font-size: 5px;
  line-height: 0.853333rem;
  color: #3f51b5;
  border-color: #3f51b5;
  border-radius: 50px;
  vertical-align: bottom;
  border: 1px solid #3f51b5;
  position: absolute;
  top: 150px;
  left: 230px;
}
/deep/ .hot_itemmmm {
  height: 60px;
  padding: 0 0.373333rem;
  font-size: 5px;
  line-height: 0.853333rem;
  color: #3f51b5;
  border-color: #3f51b5;
  border-radius: 50px;
  vertical-align: bottom;
  border: 1px solid #3f51b5;
  position: absolute;
  top: 150px;
  left: 400px;
}
/deep/ .hot_itemmmmm {
  height:60px;
  padding: 0 0.373333rem;
  font-size: 5px;
  line-height: 0.853333rem;
  color: #3f51b5;
  border-color: #3f51b5;
  border-radius: 50px;
  vertical-align: bottom;
  border: 1px solid #3f51b5;
  position: absolute;
  top: 150px;
  left: 550px;
}
/deep/ .text{
  vertical-align:middle;
  font-size:10px;
  margin-left: 40px;

}
/deep/ .spandz{
  font-size:10px;
  color:#d8d7cf;
  margin-left:50px
}
</style>
